<template>
   <div class="banner-body">
       <img class="bannerImg" v-bind:src="imgsrc" alt="" @click="showGallery">
       <p class="banner-title">五谷香自助涮烤火锅</p>
       <p class="banner-type">单人自助餐</p>
       <!-- 遮罩mask -->
       <PublicFade>
            <div class="mask" v-show="maskStatus" @click="closeMask">
                <!-- 轮播区域 -->
                <div class="gallery-body">
                    <!-- 轮播容器 -->
                    <div class="wrapper">
                        <swiper :options="swiperOption">
                                <swiper-slide 
                                    v-for="slide in swiperSlides" 
                                    :key="slide"
                                >
                                    <!-- 1、绑定图片元素 -->
                                    <img v-bind:src="slide" alt="" ref="swiper">
                                </swiper-slide>
                                <div class="swiper-pagination pagination-position" slot="pagination"></div>
                            </swiper>
                    </div>
                </div>
            </div>
       </PublicFade>
   </div>
</template>
   
<script>
    import PublicFade from '../../components/PublicFade' 
   export default {
       data () {
           return {
               maskStatus:false,
               imgsrc:'http://p1.meituan.net/deal/fa80f07fb5fbeaff7c501c8a586872c432689.jpg',
               swiperSlides:[
                  'http://p1.meituan.net/deal/fa80f07fb5fbeaff7c501c8a586872c432689.jpg',
                  'http://p1.meituan.net/440.0/dealwatera/2789ed56b370e8524fcbf6ecf1674673199011.jpg',
                  'http://p0.meituan.net/440.0/dealwatera/accea18e9f966359f3b85d1b1fdc2383175479.jpg',
                  'http://p0.meituan.net/440.0/dealwatera/a504b4ed1277466be1c94a19820a267b132382.jpg',
                  'http://p1.meituan.net/440.0/dealwatera/3ae9ea71e81bf3df315841a6d65e9173105998.jpg',
                  'http://p0.meituan.net/440.0/dealwatera/d1c921074a7c6bdecd89bdc15ab5eaba95929.jpg',
                  'http://p0.meituan.net/440.0/dealwatera/e58dde61bfb841d055ce2ecf32bd4b43114001.jpg',
                  'http://p1.meituan.net/440.0/dealwatera/ab84eccbd7464716c4d3d9d2a43efdf6118248.jpg',
                  'http://p0.meituan.net/440.0/dealwatera/c5242f6a177363c88f0b615ef1567d6a127789.jpg',
                  'http://p1.meituan.net/440.0/dealwatera/a4445957b670297969f3de0d08746d7c104126.jpg'
                ],
                swiperOption:{
					autoplay:false,
					autoplayDisableOnInteraction : false,   // 用户操作swiper之后，是否禁止autoplay
					pagination:'.swiper-pagination',/*控制进度分页*/
					loop:true,/*无缝循环*/
					paginationType:'fraction',/**分页器样式类型 */
					observeParents:true,
                    observer:true,
                    initialSlide: 0,/**初始化显示图片 */
				}
           }
       },
       methods: {
           showGallery(){
               this.maskStatus = true
           },
           closeMask(event){
               var swiper = this.$refs['swiper'][0];/**获取图片元素 */
                /*判断*/
                if(!swiper.contains(event.target)){
                    this.maskStatus = false
                }
           }
       },
       components: {
           PublicFade
       }
   }
</script>
   
<style scoped lang="less">
   .banner-body{
       position: relative;/**给父级添加相对定位 */
       color: #fff;
       .bannerImg{
           width: 100%;
           height: 5.2rem;
       }
        .banner-title{
            position: absolute;
            left: .4rem;
            bottom: 1.6rem;
            font-size: .506667rem;
            font-weight: 600;
        }
        .banner-type{
            position: absolute;
            left: .4rem;
            bottom: .866667rem;
            font-size: .373333rem;
        }
        .mask{
            position: fixed;
            width: 100vw;
            height: 100vh;
            background: #000;
            left: 0;
            top: 0;
            /*弹性布局*/
            display: flex;
            flex-direction: column;/**将排列方向由水平改为垂直，更改主轴方向为交叉轴 */
            justify-content: center;/**垂直方向居中 */
            z-index: 99999;
            img{
                width: 100%;
            }
            .pagination-position{
                position: fixed;
                top: 2.666667rem;
                width: 100%;
                text-align: center;
            }
        }
   }
</style>